<!DOCTYPE html>

<html lang="{{ page.lang | default: site.lang | default: "en" }}">

{% include head.html %}

<body class="preview-page">

    <div class="preview-bar bg-white fixed-top py-2 border-bottom-primary">
        <div class="container-fluid h-100">
            <div class="row align-items-center justify-content-between h-100">
                <div class="col-auto col-lg">
                    <i class="fab fa-github text-github small"></i>

                    {% if page.migrated %}
                    <a class="small" href="https://github.com/StartBootstrap/{{ page.slug }}">View on GitHub</a>
                    {% else %}
                    <a class="small" href="https://github.com/BlackrockDigital/startbootstrap-{{ page.slug }}">View on GitHub</a>
                    {% endif %}

                </div>
                <div class="col col-auto d-none d-xl-block">
                    <ul class="nav responsive-toggler justify-content-center" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="desktopToggle" data-toggle="tab" href="#" role="tab" aria-selected="true">
                                <i class="fal fa-desktop"></i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="mobileToggle" data-toggle="tab" href="#" role="tab" aria-selected="false">
                                <i class="fal fa-mobile"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col text-right">

                    {% if page.builder %}
                    <a href="https://builder.startbootstrap.com/builder/{{ page.slug }}" class="btn btn-info btn-sm mr-2" onclick="ga('send','event','Builder','click','{{ page.title }} Builder')">
                        <i class="fal fa-edit fa-fw"></i> <span>Customize<span class="d-none d-md-inline"> &amp; Download (Free)</span></span>
                    </a>
                    {% endif %}

                    {% if page.migrated %}
                    <a href="https://github.com/StartBootstrap/{{ page.slug }}/archive/master.zip" class="btn btn-primary btn-sm mr-2" onclick="ga('send','event','Download','click','{{ page.title }}')">Free Download</a>
                    {% else %}
                    <a href="https://github.com/BlackrockDigital/startbootstrap-{{ page.slug }}/archive/gh-pages.zip" class="btn btn-primary btn-sm mr-2" onclick="ga('send','event','Download','click','{{ page.title }}')">Free Download</a>
                    {% endif %}

                    {% if page.custom-preview-link %}
                    <a href="{{ page.custom-preview-link }}/" class="btn btn-link btn-sm d-none d-md-inline-block"><i class="fal fa-times mr-1"></i> Remove Frame</a>
                    {% else %}
                    <a href="https://blackrockdigital.github.io/startbootstrap-{{ page.slug }}/" class="btn btn-link btn-sm d-none d-md-inline-block"><i class="fal fa-times mr-1"></i> Remove Frame</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if page.custom-preview-link %}
    <iframe class="iframe-preview" width="100%" src="{{ page.custom-preview-link }}/"></iframe>
    {% else %}
    <iframe class="iframe-preview" width="100%" src="https://blackrockdigital.github.io/startbootstrap-{{ page.slug }}/"></iframe>
    {% endif %}

    {% include scripts.html %}

    <script>
        $("#desktopToggle").on('click', function(e) {
            e.preventDefault();
            $(".iframe-preview").removeClass("iframe-preview-mobile");
        });
        $("#mobileToggle").on('click', function(e) {
            e.preventDefault();
            $(".iframe-preview").addClass("iframe-preview-mobile");
        });
    </script>

</body>

</html>
